
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Basic Page Needs
    ================================================== -->
    <meta charset="utf-8">
    <title>Tell a Story</title>
    <!-- Favicons
    ================================================== -->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/res/img/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="${pageContext.request.contextPath}/res/img/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="${pageContext.request.contextPath}/res/img/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="${pageContext.request.contextPath}/res/img/apple-touch-icon-114x114.png">

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css"  href="${pageContext.request.contextPath}/res/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/res/fonts/font-awesome/css/font-awesome.css">

    <!-- Nivo Lightbox
    ================================================== -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/css/nivo-lightbox.css" >
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/css/nivo_lightbox_themes/default/default.css">

    <!-- Slider
    ================================================== -->
    <link href="${pageContext.request.contextPath}/res/css/owl.carousel.css" rel="stylesheet" media="screen">
    <link href="${pageContext.request.contextPath}/res/css/owl.theme.css" rel="stylesheet" media="screen">

    <!-- Stylesheet
    ================================================== -->
    <link rel="stylesheet" type="text/css"  href="${pageContext.request.contextPath}/res/css/style.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/res/css/responsive.css">
    <script src="${pageContext.request.contextPath}/res/js/jquery-1.11.2.min.js"></script>
    <script src="${pageContext.request.contextPath}/res/js/bootstrap.min.js"></script>
    <script>
        var onPageNum;
        $(function(){
            onPageNum  =  1;
        });
        function loadColumn() {
            //页码加1

            onPageNum=onPageNum+1;
            var columnType = '${columnType}';
            var params = {
                columnType:columnType ,
                pageNum : onPageNum
            };
            $.ajax({
                type: "GET",
                url: "/column/loadMoreColumnList",
                data: params,
                dataType:"html", //ajax返回值设置为text（json格式也可用它返回，可打印出结果，也可设置成json）
                success: function(date){
                    var columnList = $(date).find("#columnList");
                    var column =  columnList.find("#column").html();
                    if(column!=null){
                        $("#itemsWorkThree").append(columnList).html() ;
                    }
                    else{
                        $("#loadColumnBut").text("没有更多专栏了！");
                    }
                },
                error: function(date){
                    alert("服务器错误！date=" + date);
                    return false;
                }
            });
        }
    </script>
</head>
<body>

<!-- Main Navigation
================================================== -->

<jsp:include   page="../nav.jsp" flush="true"/>

<!-- Page Header
================================================== -->


<!-- Works Section
================================================== -->
<div id="tf-works">




    <jsp:include   page="menu_column.jsp" flush="true"/>

    <div class="container"> <!-- container -->
        <div id="itemsWorkThree" class="row text-center"> <!-- Portfolio Wrapper Row -->
            <div id="columnList">
                <c:forEach var="columnDTO" items="${columnDTOList}" varStatus="vs">
                    <div id="column">
                        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> <!-- Works #1 col 3 -->
                            <a href="/columnArticle/viewColumnArticle?columnID=${columnDTO.columnID}">
                                <div class="box">
                                    <div class="hover-bg">
                                        <div class="hover-text off">

                                        </div>
                                        <img src="${pageContext.request.contextPath}/res/img/portfolio/06.jpg" class="img-responsive" alt="Image"> <!-- Portfolio Image -->
                                    </div>
                                    <h5>${columnDTO.columnName}<br>
                                        <small><em>${columnDTO.columnType}</em></small>
                                        <br>
                                        <i class="fa fa-eye"></i> ${columnDTO.readNum}
                                    </h5>
                                </div>
                            </a>
                        </div><!-- end Works #1 col 3 -->
                    </div>
                </c:forEach>
            </div>
        </div> <!-- End Row -->
        <div class="text-center">
            <button  id="loadColumnBut" class="btn btn-primary tf-btn color" onclick="loadColumn()" >加载更多</button>
        </div>

    </div> <!-- End Container -->





</div>

<!-- Footer
================================================== -->
<jsp:include   page="../foot.jsp" flush="true"/>





</body>
</html>
